<template>
  <div class="goods">
    <div class="smallTitle">
      <div class="left">
        <p class="afterC"></p>
        <p class="p1">{{ TextTitle }}</p>
        <van-count-down v-show="TextTitle === '限时兑换'" class="timeOut" :time="time" />
      </div>
      <div class="right" @click="goList(TextTitle)">更多</div>
    </div>
    <ul class="Commodity">
      <li v-for="image in listStore.list" :key="image.goodsid" @click="goDetail(image.goodNorms[0].photo, image.goodsid)">
        <img :src=image.goodNorms[0].photo alt />
        <p>￥{{ image.discountprice }}</p>
        <p v-show="hasOldPrice">
          <del>￥{{ image.gprice }}</del>
        </p>
      </li>
      <li @click="goList(TextTitle)">查看更多</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useListStore } from "../../stores/list.js";
import { useDetailStore } from "../../stores/detail.js";
import dayjs from "dayjs"
const detailStore = useDetailStore()
const listStore = useListStore()


const router = useRouter();
defineProps({
  TextTitle: {
    type: String,
    default: "限时兑换"
  },
  hasOldPrice: {
    type: Boolean,
    default: false
  }
});
const time = ref(30 * 60 * 60 * 1000);

function goDetail(val, goodsid) {

  // console.log(111111)

  if (localStorage.shop && localStorage.shop.length !== 0) {

    const arr = JSON.parse(localStorage.shop)
    const newtime = dayjs().format('YYYY-MM-DD')

    const bool = arr.findIndex((item) => {
      return item.time == newtime
    })

    if (bool === -1) {
      arr.unshift({
        img: [val],
        time: newtime
      })
      localStorage.shop = JSON.stringify(arr)
    } else {
      const flag = arr[bool].img.indexOf(val)
      if (flag === -1) {
        arr[bool].img.unshift(val)
      }

      localStorage.shop = JSON.stringify(arr)

    }

  } else {

    const arr = [
      {
        time: dayjs().format('YYYY-MM-DD'),
        img: [val]
      }
    ]
    localStorage.shop = JSON.stringify(arr)
  }

  detailStore.getDetailInfo(goodsid).then((res)=>{
    detailStore.images=res.data.data

    router.push({
    path: '/ShopDetail',
  });

  });


}
function goList(TextTitle) {
  router.push({
    path: "/ShopList",
    query: {
      TextTitle
    }
  })
}
</script>

<style scoped>
.goods {
  width: 90vw;
  margin-left: 2.667vw;
}

.p1 {
  font-size: 14px;
}

.smallTitle {
  display: flex;
  justify-content: space-between;
  font-size: 2.4vw;
  font-weight: bold;
  margin: 2.667vw 0;
}

.smallTitle>.left {
  display: flex;
  align-items: center;
}

.smallTitle>.right {
  font-size: 3.467vw;
  font-weight: normal;
  color: #cccccc;
}

.afterC {
  width: 0.8vw;
  background-color: red;
  border-radius: 0.267vw;
  margin-right: 2.667vw;
  height: 92%;
}

.Commodity {
  display: flex;
  overflow-x: scroll;
}

.Commodity>li {
  margin-right: 6.133vw;
}

.Commodity>li>img {
  width: 26.667vw;
  height: 26.667vw;
}

.Commodity>li>p {
  text-align: center;
  font-size: 3.733vw;
  line-height: 6.667vw;
}

.Commodity>li>p:last-child {
  text-decoration: line-through;
  font-size: 2.933vw;
  color: #666666;
  line-height: 8.533vw;
}

.Commodity>li:last-child {
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
  margin-top: 4vw;
  font-size: 3.467vw;
}

::-webkit-scrollbar {
  display: none;
}

.timeOut {
  width: 13.333vw;
  font-weight: normal;
  margin-left: 2.667vw;
  margin-top: 0.533vw;
}
</style>